<template>
  <ons-page id="home-page">
    <v-ons-toolbar>
      <ons-pull-hook>

      <ons-icon size="30px" spin icon="md-spinner"></ons-icon>
    </ons-pull-hook>
      
    </v-ons-toolbar>
    

    <ons-list>
      <ons-list-item modifier="longdivider">
        <div class="left">
          <img class="list-item__thumbnail" src="http://placekitten.com/g/40/40">
        </div>
        <div class="center">
          <div class="tweet-header">
            <span class="list-item__title"><b>Cute Kitty</b></span>
            <span class="list-item__subtitle">@cKitty&nbsp;&#8231;&nbsp;1d</span>
            <ons-button class="option-arrow" modifier="quiet" onclick="ons.openActionSheet({
              cancelable: true,
              buttons: [
                'Share Tweet via...',
                'Add to Moment',
                'I don\'t like this Tweet',
                'Report Tweet',
                {
                  label: 'Cancel',
                  icon: 'md-close'
                }
              ]
            })">
              <ons-icon icon="ion-arrow-down-b"></ons-icon>
            </ons-button>
          </div>
          <span class="list-item__content">我超我超我超我超我超我超我超我超我超我超我超我超我超我超 incididunt ut labore et dolore magna aliqua.</span>
          <ons-row class="option-buttons">
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="ion-reply"></ons-icon><span class="reaction-no">1</span>
              </ons-button>
            </ons-col>
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="retweet"></ons-icon><span class="reaction-no">2</span>
              </ons-button>
            </ons-col>
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="ion-heart"></ons-icon><span class="reaction-no">3</span>
              </ons-button>
            </ons-col>
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="ion-email"></ons-icon>
              </ons-button>
            </ons-col>
          </ons-row>
        </div>
      </ons-list-item>

      <ons-list-item modifier="longdivider">
        <div class="left">
          <img class="list-item__thumbnail" src="http://placekitten.com/g/50/50">
        </div>
        <div class="center">
          <div class="tweet-header">
            <span class="list-item__title"><b>Cute Kitty 2</b></span>
            <span class="list-item__subtitle"><span class="username">@cKitty2</span>&nbsp;&#8231;&nbsp;2d</span>
            <ons-button class="option-arrow" modifier="quiet" onclick="ons.openActionSheet({
              cancelable: true,
              buttons: [
                'Share Tweet via...',
                'Add to Moment',
                'I don\'t like this Tweet',
                'Unfollow @cKitty2',
                'Mute @cKitty2',
                'Block @cKitty2',
                'Report Tweet',
                {
                  label: 'Cancel',
                  icon: 'md-close'
                }
              ]
            })">
              <ons-icon icon="ion-arrow-down-b"></ons-icon>
            </ons-button>
          </div>
          <span class="list-item__content">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <img src="http://placekitten.com/g/200/200" alt="PostImage">
          </span>
          <ons-row class="option-buttons">
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="ion-reply"></ons-icon><span class="reaction-no">2</span>
              </ons-button>
            </ons-col>
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="retweet"></ons-icon><span class="reaction-no">4</span>
              </ons-button>
            </ons-col>
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="ion-heart"></ons-icon><span class="reaction-no">6</span>
              </ons-button>
            </ons-col>
            <ons-col>
              <ons-button modifier="quiet">
                <ons-icon icon="ion-email"></ons-icon>
              </ons-button>
            </ons-col>
          </ons-row>
        </div>
      </ons-list-item>
      
      

      <div style="text-align: center; margin-bottom: 30px">
        <ons-icon size="30px" spin icon="md-spinner"></ons-icon>
      </div>
    </ons-list>

      
  </ons-page>
</template>



<script>
export default {
  name: 'Home',
  data() {
    return {
    };
  },
  methods: {
    
  }
}
</script>